<template>
  <div class="message-center-container">
    <NavView/>
    <el-container>
      <!-- 左侧导航菜单 -->
      <el-aside width="220px" class="left-menu">
        <div class="menu-header">
          <h2>消息中心</h2>
        </div>

        <el-menu
          :default-active="$route.path"
          class="message-menu"
          router
        >
          <el-sub-menu index="/message/my-messages">
            <template #title>
              <span>我的消息</span>
            </template>
            <el-menu-item index="/message/allMessages">我的消息</el-menu-item>
            <el-menu-item index="/message/replies">回复我的</el-menu-item>
            <el-menu-item index="/message/mentions">@我的</el-menu-item>
            <el-menu-item index="/message/likes">收到的赞</el-menu-item>
            <el-menu-item index="/message/system">系统通知</el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="/message/settings">
            <template #title>
              <span>消息设置</span>
            </template>
            <el-menu-item index="/message/settings">消息设置</el-menu-item>
            <el-menu-item index="/message/recent">最近消息</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 右侧内容区域 -->
      <el-main class="right-content">
        <router-view :messages="filteredMessages"></router-view>

        <div class="quick-chat" v-if="showQuickChat">
          <p class="quick-chat-title">快步小伙伴聊天吧（" - "）> n</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import NavView from '../../../home/components/NavView.vue'

const route = useRoute()

// 消息数据
const messages = ref([
  {
    sender: '你装入图文面试',
    content: '打开小贴，直接root（你的...）',
    time: '10:30',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: false,
    type: 'all'
  },
  {
    sender: '白月黑羽编辑',
    content: '白月黑羽视频对...',
    time: '昨天',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '我是瑞斯拜',
    content: '自动提醒：重现...',
    time: '昨天',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '小野WE8世界',
    content: '你好，我是小野...',
    time: '前天',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '黑马程序员',
    content: '感谢您关注黑马...',
    time: '3天前',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '幼稚园大队长！',
    content: '感谢您的好邻居...',
    time: '5天前',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '烤鸭TV',
    content: '还在因为高考毕业...',
    time: '1周前',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: true,
    type: 'all'
  },
  {
    sender: '用户A',
    content: '我回复了你的评论...',
    time: '2小时前',
    avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
    autoReply: false,
    type: 'replies'
  }
])

// 过滤后的消息
const filteredMessages = computed(() => {
  const currentPath = route.path.split('/').pop()

  if (['all', 'recent'].includes(currentPath)) {
    return messages.value.filter(msg => msg.type === 'all')
  } else if (currentPath === 'replies') {
    return messages.value.filter(msg => msg.type === 'replies')
  }
  return []
})

// 是否显示快速聊天
const showQuickChat = computed(() => {
  const currentPath = route.path.split('/').pop()
  return ['all', 'replies', 'mentions', 'likes', 'system'].includes(currentPath)
})
</script>

<style scoped lang="scss">
.message-center-container {
  height: 100vh;
  background-color: #f5f5f5;

  .el-container {
    height: 100%;
  }
}

.left-menu {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;

  .menu-header {
    padding: 20px;
    border-bottom: 1px solid #e6e6e6;

    h2 {
      margin: 0;
      font-size: 18px;
      color: #333;
    }
  }

  .message-menu {
    border-right: none;

    :deep(.el-sub-menu__title),
    :deep(.el-menu-item) {
      height: 48px;
      line-height: 48px;
    }
  }
}

.right-content {
  padding: 20px;
  background-color: #fff;
  margin: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.message-list {
  .message-item {
    display: flex;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .message-avatar {
      margin-right: 15px;
    }

    .message-content {
      flex: 1;

      .message-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;

        .sender-name {
          font-weight: bold;
          color: #333;
        }

        .message-time {
          font-size: 12px;
          color: #999;
        }
      }

      .message-body {
        .message-text {
          margin: 0 0 5px 0;
          color: #666;
          font-size: 14px;
        }
      }
    }
  }
}

.empty-message {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-view {
  padding: 20px;

  h3 {
    margin-top: 0;
    margin-bottom: 20px;
    color: #333;
  }
}

.quick-chat {
  margin-top: 30px;
  padding-top: 15px;
  border-top: 1px dashed #e6e6e6;

  .quick-chat-title {
    margin: 0;
    color: #999;
    font-size: 14px;
    text-align: center;
  }
}
</style>
